<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <link rel="stylesheet" href="./index1.css" />
</head>

<body>
  <section id="wrap">
    <h2 class="title">百度音乐榜单</h2>
    <ul id="list">
      <li>
        <input type="checkbox" />
        <span>第一条信息</span>
        <a href="javascript:;" class="collect">收藏</a>
        <a href="javascript:;" class="cancelCollect">取消收藏</a>
        <a href="javascript:;" class="remove">删除</a>
      </li>
    </ul>
    <footer class="footer">
      <label><input type="checkbox" id="checkAll" />全选/全不选</label>
    </footer>
  </section>
  <script>
    var data = [
      {
        id: 0,
        title: "残酷月光 - 费启鸣",
        checked: true,
        collect: false
      }, {
        id: 1,
        title: "兄弟 - 艾热",
        checked: false,
        collect: false
      }, {
        id: 2,
        title: "毕生 - 夏增祥",
        checked: true,
        collect: true
      }, {
        id: 3,
        title: "公子向北去 - 李春花",
        checked: false,
        collect: false
      }, {
        id: 4,
        title: "战场 - 沙漠五子",
        checked: false,
        collect: false 
      }
    ];
    function renderDom(data) {
      let ulEle = document.querySelector("#list");
      ulEle.innerHTML = ``;
      data.forEach(function (item, key) {
        let liEle = document.createElement("li");
        liEle.innerHTML = `<input type="checkbox" ${item.checked ? 'checked' : ''}  />
                            <span>${item.title}</span>
                            ${item.collect ? '<a href="javascript:;" class="cancelCollect">取消收藏</a>' : '<a href="javascript:;" class="collect">收藏</a>'}
                            <a href="javascript:;" class="remove">删除</a>`;
        ulEle.appendChild(liEle);
        liEle.onclick = function (e) {
          if (e.target.classList.contains("collect")) {
            console.log("点击了收藏按钮");
            data[key].collect = true;
            console.log(data);
            renderDom(data);
          }
          if (e.target.classList.contains("cancelCollect")) {
            console.log("点击了取消收藏按钮");
            data[key].collect = false;
            console.log(data);
            renderDom(data);
          }
          // 删除 
          if(e.target.classList.contains("remove")){
              // console.log("点击了删除按钮")
              data.splice(key,1);
              console.log(data);
              renderDom(data);
          }
          console.log(e.target.nodeName); 
          if(e.target.nodeName.toLowerCase()==="input"){
                data[key].checked = e.target.checked;
                console.log("key",key);
                console.log(data);
               var res =  isCheckall();
               document.querySelector("#checkAll").checked =  res;
          }
        }
      })
    }
    renderDom(data);
    document.querySelector("#checkAll").onclick = function(){
      // console.log(this.checked);
      var that = this;
      data.forEach(function(item){
          item.checked = that.checked;
      })
      console.log(data);
      renderDom(data);
    }

function isCheckall(){
  return data.every(function(item){
      return item.checked;
  })
}
    
  </script>
</body>

</html>